<template>
  <div class="box">
    <el-container class="box_con">
      <!-- 头部 -->
      <el-header class="head">
        <div class="head_box">
          <div class="h_left">
            <h2>
              <a href="javascript:;">论坛首页</a>
            </h2>
            <el-input
              placeholder="帖子/用户"
              v-model.lazy="searchInput"
              class="input-with-select"
              clearable
              @keyup.enter.native="goSearch"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="goSearch"
              ></el-button>
            </el-input>
          </div>
          <div class="h_right">
            <div v-if="!mytoken">
              <el-button type="primary" @click="handleLoginClick">登录</el-button>
              <el-button @click="handleRegisterClick">注册</el-button>
            </div>
            <div v-else>
              <el-dropdown>
                <div class="el-dropdown-link">
                  <el-avatar icon="el-icon-user-solid"></el-avatar>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>当前用户：{{ nickname || '游客' }}</el-dropdown-item>
                  <el-dropdown-item divided>积分: 0</el-dropdown-item>
                  <el-dropdown-item class="last" divided>
                    <el-button type="danger" size="mini" @click="loginout">退出</el-button>
                    <el-button type="primary" size="mini" @click="handleUserSet">设置</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <div class="main_box">
          <!-- 路由占位符 -->
          <router-view></router-view>
        </div>
      </el-main>
      <!-- 底部 -->
      <el-footer>
        <div class="copyright">
          <span class="inline-block">Copyright&copy; 2020</span>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false">积分商场</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false">加入我们</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false" @click="aboutDialog">关于我们</el-link>
        </div>
      </el-footer>
    </el-container>

    <!-- 关于我们 对话框 -->
    <el-dialog
      title="关于我们"
      :visible="aboutVisible"
      width="30%">
      <span>QQ: 1440465038</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aboutVisible = false">取 消</el-button>
        <el-button type="primary" @click="aboutVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Session } from '@/assets/js/lib.js'
export default {
  data () {
    return {
      id: JSON.parse(Session.get('loginId')),
      // 搜索
      searchInput: '',
      nickname: '',
      aboutVisible: false
    }
  },
  computed: {
    ...mapState(['filterVal', 'userSet']),
    mytoken () {
      // 取 token
      var token = JSON.parse(window.sessionStorage.getItem('token'))
      return token
    }
  },
  created () { },
  mounted () {
    this.setNickname()
  },
  methods: {
    ...mapMutations(['handleClr']),
    goSearch () {
      const val = this.searchInput.trim()
      this.$store.commit('setFilterVal', val)
      // console.log(this.searchInput)
    },
    handleRegisterClick () {
      this.$router.push('/register')
    },
    // 点击登录按钮
    handleLoginClick () {
      this.$router.push('/login')
    },
    // 处理退出事件
    loginout () {
      window.sessionStorage.setItem('token', JSON.stringify(false))
      window.sessionStorage.removeItem('loginId')
      this.$router.go(0)
    },
    // 用户点击设置
    handleUserSet () {
      this.$router.push('/index/set')
    },
    setNickname () {
      if (this.id && this.userSet) {
        const userObj = this.userSet.find(item => this.id === item.id)
        if (userObj) {
          this.nickname = userObj.nickname || '游客'
        }
      }
    },
    aboutDialog () {
      this.aboutVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
}

/* 头部区域 */
.el-header {
  height: 80px !important;
  background-color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .head_box {
    width: 1240px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .h_left {
      display: flex;
      align-items: center;
      h2 {
        white-space: nowrap;
      }

      h2 a {
        color: #2ec7bb;
      }

      .el-input {
        margin-left: 20px;
      }
    }
    .h_right {
      margin-right: 80px;
    }
  }
}

.el-dropdown-menu__item.last:hover {
  background-color: #fff !important;
}

/* 主体区域 */
.el-main {
  width: 100%;
  padding: 20px 0 30px;
  overflow: inherit;
  .main_box {
    width: 1240px;
    margin: 0 auto;
  }
}

/* 底部 */
.el-footer {
  height: auto !important;
  padding: 50px 0;
  background-color: #fff;
  text-align: center;
  .copyright {
    height: 30px;
    line-height: 30px;
    a,
    span {
      font-size: 12px;
      color: #7c7c7c;
    }
    a:hover {
      color: #2ec7bb !important;
    }
  }
}

@media screen and (max-width: 1000px) {
  .el-header {
    width: 1000px;
    .head_box {
      width: 1000px;
    }
  }

  .el-main {
    .main_box {
      width: 800px;
    }
  }

  .el-footer {
    width: 1000px;
  }
}

</style>
